<template>
    <div class="home-view">
        <WeatherHead />
        <CitySearch />
        <WeatherBody :weatherData="localWeatherStore.LocalWeather" />
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import WeatherHead from '@/components/WeatherHead.vue'
import CitySearch from '@/components/CitySearch.vue'
import WeatherBody from '@/components/WeatherBody.vue'
import { useLocalWeatherStore } from '@/stores/LocalWeather'

const localWeatherStore = useLocalWeatherStore()

onMounted(async () => {
  await localWeatherStore.fetchLocalWeather(); 
});
</script>

<style scoped>
.home-view {
    background-color: #00668a;
    min-height: 100vh;
}
</style>